import { useNavigate, useSearchParams } from 'react-router-dom';
import type { YmAddPageLayoutProps, YmColumnsType } from 'ym-design';
import { YmAddPageLayout, YmTable } from 'ym-design';
import { getPhoneDetailList, PhoneDetailListType } from './data';
const { PaneItem } = YmAddPageLayout;
const PhoneDetail: React.FC<any> = () => {
  const navigator = useNavigate();
  const [searchParam] = useSearchParams();
  const driverId = searchParam.get('driverId');
  const entId = searchParam.get('belongEntId');
  // 初始化字段定义
  const columns: YmColumnsType<PhoneDetailListType> = [
    {
      title: '拨打企业',
      dataIndex: 'belongEntName',
      key: 'belongEntName',
      ellipsis: true,
      width: 140,
    },
    {
      title: '拨打人员',
      dataIndex: 'dialingPersonName',
      key: 'dialingPersonName',
      width: 140,
      render(value: string, record: any) {
        return (
          <div>
            {value || record.dialingPersonPhone ? (value || '--') + ' ' + (record.dialingPersonPhone || '--') : '--'}
          </div>
        );
      },
    },
    {
      title: '司机姓名',
      dataIndex: 'driverName',
      width: 140,
      key: 'driverName',
    },
    {
      title: '司机手机号',
      dataIndex: 'driverPhone',
      key: 'driverPhone',
      width: 140,
    },
    {
      title: '拨打记录',
      dataIndex: 'latestCallRecordsTime',
      key: 'latestCallRecordsTime',
      width: 140,
    },
    {
      title: '是否接通',
      dataIndex: 'isConnected',
      key: 'isConnected',
      width: 140,
      render(value) {
        return <div>{value == 1 ? '是' : '否'}</div>;
      },
    },
    {
      title: '通话时长',
      dataIndex: 'callDuration',
      key: 'callDuration',
      width: 140,
    },
  ];
  const layoutParams: YmAddPageLayoutProps = {
    leftOperation: {
      onBack: () => {
        navigator(-1);
      },
    },
    rightOperationDom: null,
    destroyInactiveTabPane: false,
  };
  return (
    <YmAddPageLayout {...layoutParams}>
      <PaneItem tabKey="tab1" label={''} className="pane_tab1">
        <YmTable
          wrapperStyle={{ background: '#FFF' }}
          columns={columns}
          request={async ({ page }) => {
            const { current = 1, pageSize = 10 } = page ?? {};
            const response = await getPhoneDetailList({
              pageIndex: current,
              pageSize,
              driverId,
              entId,
            });
            return response;
          }}
          rowKey="personName"
        />
      </PaneItem>
    </YmAddPageLayout>
  );
};
export default PhoneDetail;
